<template>
  <div style="min-height: calc(100vh - 86px);">
    <div style="width: 70%; margin: 10px auto">
      <!--      上面的区域-->
      <div style="display: flex; grid-gap: 10px">
        <div style="flex: 1">
          <el-carousel height="300px" style="width:100%;text-align: center;">
            <el-carousel-item v-for="item in imgs" :key="item">
              <img :src="item" alt="" style="width:100%;height: 550px;">
            </el-carousel-item>
          </el-carousel>
        </div>


      </div>
      <!--      下面的区域-->
      <div style="margin: 30px 0; display: flex; grid-gap: 20px; min-height: 400px">
        <!--        左边区域-->
        <div style="flex: 1">
          <div style="display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px">
            <div @click="loadTopNews('new')" class="top-news" :class="{ 'top-active': sort === 'new' }">最新资讯</div>
          </div>

          <div style="padding: 0 10px">
            <div @click="$router.push('/front/infoDetail?id=' + item.id)" v-for="item in topNews" :key="item.id"
              style="display: flex; grid-gap: 10px; margin: 10px 0; cursor: pointer">
              <div style="flex: 1; width: 0;" class="line1">{{ item.infoTitle }}</div>
              <div style="color: #666; font-size: 13px">{{ customFormatterDataTime(item.publishTime) }}</div>
            </div>
          </div>
        </div>

        <!--        右边区域-->
        <div style="width: 260px">
          <div style="margin-bottom: 10px; display: flex; align-items: center">
            <div style="flex: 1; font-size: 24px; ">公益活动</div>
            <a href="/front/activity">更多>></a>
          </div>
          <div class="card">
            <div @click="$router.push('/front/activityDetail?id=' + item.id)"
              style="display: flex; grid-gap: 10px; margin-bottom: 15px; cursor: pointer" v-for="item in activityList"
              :key="item.id">
              <img :src="item.img" alt="" style="width: 60px; height: 60px; border-radius: 5px">
              <div style="flex: 1">
                <div style="height: 40px; margin-bottom: 5px" class="line2">{{ item.activityName }}</div>
                <div style="color: #666; font-size: 13px">{{ customFormatterData(item.startDate) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { customFormatterDataTime, customFormatterData } from '@/utils/dateTimeFormatter'
export default {

  data() {
    return {
      imgs: [
        require('@/assets/imgs/carousel/1.png'),
        require('@/assets/imgs/carousel/2.png'),
      ],
      sort: 'new',  // hot
      // topNews: [],
      // categoryList: [],
      category: null,
      pageNum: 1,
      pageSize: 4,
      total: 0,
      tableData: [],
      // activityList: [],
      infoForm: {
        infoTitle: '',
        infoTypeId: '',
        page: 1,
        pageSize: 7,
      },
    }
  },
  created() {
    this.getInfoActions(this.infoForm);
    this.userActivityListActions({
      page: 1,
      pageSize: 7,
    });
  },
  mounted() {
    console.log(this.infoForm);
    this.loadTopNews('new')
    this.loadCategory()
    this.loadCategoryNews(null)
    this.loadActivity()
  },
  computed: {
    ...mapState('userInfo', ['topNews']),
    ...mapState('userActivity', ['activityList'])
  },
  methods: {
    customFormatterDataTime,
    customFormatterData,
    ...mapActions('userInfo', ['getInfoActions']),
    ...mapActions('userActivity', ['userActivityListActions']),
    loadActivity() {
    },
    loadCategoryNews(category) {
      this.category = category
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.loadCategoryNews(this.category)
    },
    loadCategory() {
      /* this.$request.get('/category/selectAll').then(res => {
        this.categoryList = res.data || []
      }) */
    },
    loadTopNews(sort) {
      this.sort = sort
      this.$request.get('/news/selectTopNews?sort=' + this.sort).then(res => {
        this.topNews = res.data || []
      })
    }
  }
}
</script>

<style scoped>
.top-news {
  padding: 10px;
  cursor: pointer;
}

.top-active {
  border-bottom: 2px solid #2A60C9
}

.category-item {
  padding: 5px 10px;
  border: 1px solid #333;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}

.category-active {
  border: none;
  background-color: #2A60C9;
  color: #fff;
}
</style>
